// 确保安装所需的依赖
// npm install cesium react-router-dom styled-components

import React, { useEffect, useRef } from 'react';
import styled from 'styled-components';
import { Viewer, Ion ,SceneMode, PointPrimitiveCollection,CircleEmitter,ParticleSystem,
  Transforms,Color,Cartesian3,Math
   

 } from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
var viewModel = {
    rate: 5.0,
    gravity: 0.0,
    minimumLife: 1.0,
    maximumLife: 1.0,
    minimumSpeed: 5.0,
    maximumSpeed: 5.0,
    startScale: 1.0,
    endScale: 4.0,
    particleSize: 20.0,
    transX: 2.5,
    transY: 4.0,
    transZ: 1.0,
    heading: 0.0,
    pitch: 0.0,
    roll: 0.0,
    fly: true,
    spin: true,
    show: true
};
// 设置洪水泛滥的起始位置
const floodOrigin = Cartesian3.fromDegrees(-75.59777, 40.03883, 0); // 可替换为实际地点
const modelMatrix = Transforms.eastNorthUpToFixedFrame(floodOrigin);

// 创建粒子系统，用于模拟水流效果
const floodParticleSystem = new ParticleSystem({
  modelMatrix: modelMatrix,
  minimumSpeed: 1.0,
  maximumSpeed: 3.0,
  lifetime: 5.0,
  emitter: new CircleEmitter(1000.0), // 控制粒子的发射范围
  startScale: 1.0,
  endScale: 4.0,
  startColor: Color.BLUE.withAlpha(0.7),
  endColor: Color.BLUE.withAlpha(0.1),
  image: 'path/to/water_particle.png', // 需要水流效果的粒子图片
  emissionRate: 1000,
  bursts: [
    {
      time: 0.0,
      minimum: 50,
      maximum: 100,
      complete: false,
    },
  ],
  sizeInMeters: true,
});


// Cesium容器的样式
const CesiumContainer = styled.div`
  width: 100%;
  height: 100vh; /* 使地图全屏显示 */
`;

const SimpleCesiumMap: React.FC = () => {
  const cesiumContainerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
     
    // 设置Cesium Ion的访问令牌
    Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhZGUzZjNiOC1lMWNmLTRmM2UtYTExNS0xNTllNmIxNzVmYjMiLCJpZCI6MjUzNTkwLCJpYXQiOjE3MzA5ODI4NDV9.HiyrHUyPFOPQ_TvDDuU3SZgordkdK010WzuNMQpYDyY';

    // 初始化Cesium Viewer实例，仅加载一个基本地图
    // const viewer = new Viewer(cesiumContainerRef.current!);
    const viewer = new Viewer(cesiumContainerRef.current!, {
        // imageryProvider: createWorldImagery(), // 显式加载全球影像图层
        scene3DOnly: false,
        selectionIndicator: true,
        baseLayerPicker: true,
        sceneMode:  SceneMode.SCENE3D
      });

    var imageryLayers =  viewer.imageryLayers;
    var myviewer =  viewer
    // 将粒子系统添加到场景中
    viewer.scene.primitives.add(floodParticleSystem);

     // 设置相机视角
     viewer.camera.flyTo({
      destination: Cartesian3.fromDegrees(-75.59777, 40.03883, 5000.0),
      orientation: {
        heading: Math.toRadians(0.0),
        pitch: Math.toRadians(-30.0),
        roll: 0.0,
      },
    });

    var swapedAmt = 0
        // HTML overlay for showing feature name on mouseover
    var nameOverlay = document.createElement('div');
    myviewer.container.appendChild(nameOverlay);
    nameOverlay.className = 'backdrop';
    nameOverlay.style.display = 'none';
    nameOverlay.style.position = 'absolute';
    nameOverlay.style.bottom = '0';
    nameOverlay.style.left = '0';
    // nameOverlay.style['pointer-events'] = 'none';
    nameOverlay.style.padding = '4px';
    nameOverlay.style.backgroundColor = 'black';

    var currdistance = 200000
    var currRoundDistance = 200001

    var pointPrimitives = myviewer.scene.primitives.add(new  PointPrimitiveCollection());




    // 在组件卸载时销毁Cesium Viewer
    return () => {
      viewer.destroy();
    };
  }, []);

  return <CesiumContainer ref={cesiumContainerRef} />;
};

export default SimpleCesiumMap;
